<script setup lang="ts">
import {getDictLabelByValue, sexDict} from "@/LocalDict/dict"
import type {UserVO} from "@/types/vo/UserVO";
import {getUserById} from "@/apis/user";
import {addEmptyMessageService} from "@/apis/front/chat";
const {authorId} = defineProps<{
  authorId: number | undefined
}>()

const userInfo = ref<UserVO>()
const getUserInfo = async () => {
  const res = await getUserById(authorId || 0)
  userInfo.value = res.data.data
}

const loading = ref(false)
watch(() => authorId, async () => {
  if(authorId){
    try {
      loading.value = true
      await getUserInfo()
    } finally {
      loading.value = false
    }
  }
})

const userStore = useUserStore()
const router = useRouter()

const getPrivateChat = async (userInfo:UserVO) => {
  try {
    await addEmptyMessageService(userInfo.userName!)
    await router.push({
      path: '/Private/Chat',
      query: {
        toId: userInfo.userName
      }
    })
  } finally {
  }
}
</script>

<template>
  <div v-if="userInfo" class="rounded-2 bg-white p-6px flex flex-col items-center gap-30px">
    <div class="header w-full flex items-center gap-5px">
      <i-custom-userinfo width="24px" height="24px" />
      <span>作者信息</span>
      <n-button type="info" secondary size="small" class="ml-auto" v-if="userInfo.id !== userStore.userInfo?.id" @click="() => getPrivateChat(userInfo!)">私聊</n-button>
    </div>
    <div class="bg-#f7f8fa w-full flex flex-col gap-10px rounded-2 p-6px relative pt-30px">
      <n-avatar :src="userInfo?.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG'"
                round size="large"
                class="avatar w-50px h-50px absolute top-0 left-50% transform-translate-x-[-50%] transform-translate-y-[-50%]" />
      <div class="flex items-start justify-between gap-5px">
        <div>昵称:</div>
        <div class="flex-1">{{userInfo?.nickName || '未命名'}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>介绍:</div>
        <div class="flex-1">{{userInfo?.introduce || '这个人很懒，什么都没留下'}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>性别:</div>
        <div class="flex-1">{{getDictLabelByValue(sexDict, userInfo?.sex || 0)}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>文章:</div>
        <div class="flex-1">{{userInfo?.articleCount}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>点赞:</div>
        <div class="flex-1">{{userInfo?.likedCount}}</div>
      </div>
    </div>
  </div>
  <div class="rounded-2 bg-white p-6px flex flex-col items-center gap-30px" v-else>
    <n-skeleton text :repeat="7" />
  </div>
</template>

<style scoped lang="scss">
.header{
  padding-bottom: 5px;
  border-bottom:2px solid #aaaaaa;
}
</style>
